<template>
  <div class="container-subjects">
    <el-card>
      <!-- 筛选 -->
      <el-row>
        <!-- 表单 -->
        <el-col :span="18">
          <el-form inline size="small" label-width="90px">
            <el-form-item label="学科名称">
              <el-input v-model="params.subjectName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear()">清除</el-button>
              <el-button type="primary" @click="search()">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 按钮 -->
        <el-col :span="6" style="text-align: right">
          <el-button type="success" size="small" icon="el-icon-edit">添加学科</el-button>
        </el-col>
      </el-row>

      <!-- 总计 -->
      <el-alert class="num" :title="`数据一共${total}条`" type="info" show-icon :closable="false"> </el-alert>
      <!-- 表格 -->
      <el-table :data="subjects">
        <el-table-column label="序号" type="index" />
        <el-table-column label="学科名称" prop="subjectName" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="创建日期" width="150px">
          <template slot-scope="scope">{{ scope.row.addDate | parseTimeByString }}</template>
        </el-table-column>
        <el-table-column label="前台是否显示">
          <template slot-scope="scope">{{ scope.row.isFrontDisplay ? "是" : "否" }}</template>
        </el-table-column>
        <el-table-column label="二级目录" prop="twoLevelDirectory" />
        <el-table-column label="标签" prop="tags" />
        <el-table-column label="题目数量" prop="totals" />
        <el-table-column label="操作" width="240px">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="onGoDirectorys(scope.row)">学科分类</el-link>
            <el-link type="primary" :underline="false" @click="onGoTag(scope.row)">学科标签</el-link>
            <el-link type="primary" :underline="false">修改</el-link>
            <el-link :underline="false" @click="onDelSubject(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="pager" background layout="prev, pager, next,sizes,jumper" :total="total" :page-size="params.pagesize" :current-page="params.page" @current-change="changePager" :page-sizes="[5, 10, 20, 50]" @size-change="changeSize"> </el-pagination>
    </el-card>
    <!-- 添加学科 -->
    <el-dialog title="新增学科" :visible.sync="subjectAdd" width="30%">
      <el-form :model="addForm" :rules="addFormRules" label-width="80px">
        <!-- ref="addFormRef" -->
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="addForm.subjectName" placeholder="请输入学科名称"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch inactive-color="#ff4949" :active-value="1" :inactive-value="0" v-model="addForm.isFrontDisplay"></el-switch>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="subjectAdd = false">取 消</el-button>
        <el-button type="primary" @click="addSub">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改学科 -->
    <el-dialog title="修改学科" :visible.sync="editDialogVisible" width="30%">
      <el-form :model="editForm" :rules="editFormRules" label-width="80px">
        <!-- ref="editFormRef" -->
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="editForm.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch inactive-color="#ff4949" :active-value="1" :inactive-value="0" v-model="editForm.isFrontDisplay"></el-switch>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSub">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 学科列表api
import { list as getSubjectsList, remove as delSubject } from "@/api/hmmm/subjects.js";
export default {
  name: "subjects-page",
  components: {},
  props: {},
  data() {
    return {
      reqParams: {
        subjectName: null, // 学科名
        page: 1, // 页码
        pagesize: 10, // 每页20条数据
      },
      subjects: [], // 学科列表数据
      total: 0, // 总条数
    };
  },
  created() {
    this.getSubjects();
  },
  methods: {
    onGoDirectorys(row) {
      const { id, subjectName: name } = row;
      this.$router.push({
        path: "directorys",
        query: {
          id,
          name,
        },
      });
    },
    onGoTag(row) {
      const { id, subjectName: name } = row;
      this.$router.push({
        path: "tags",
        query: {
          id,
          name,
        },
      });
    },
    onDelSubject(id) {
      this.$confirm("此操作将永久删除该学科, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delSubject({ id });
          this.$message.success("删除成功！");
          this.getSubjects();
        })
        .catch(() => {});
    },
    // 展示编辑用户对话框
    showEditDialog(user) {
      this.editForm = user;
      // console.log(user);
      this.editDialogVisible = true;
    },

    async editSub() {
      const { data } = await subjectUpdate(this.editForm);

      // 隐藏修改学科的对话框
      this.editDialogVisible = false;
      // 重新获取列表数据
      this.getSubjects();
    },

    // 获取数据查询列表
    async getSubjects() {
      const res = await getSubjectsList(this.reqParams);
      console.log(res);
      this.total = res.data.counts;
      this.subjects = res.data.items;
    },
    onCurrentChange(page) {
      // console.log(page);
      this.reqParams.page = page;
      this.getSubjects();
    },
    onSizeChange(curPageSize) {
      console.log(123);
      this.reqParams.pagesize = curPageSize;
      this.reqParams.page = 1;
      this.getSubjects();
    },
    onSearch() {
      this.reqParams.page = 1;
      this.getSubjects();
    },
    onClear() {
      this.reqParams.subjectName = null;
    },
    // 搜索
    search() {
      this.params.page = 1;
      this.getSubjects();
    },
    // 清除
    clear() {
      this.params.subjectName = null;
    },
  },
};
</script>

<style scoped lang="scss">
.container-subjects {
  padding: 10px 8px;
}
.btn-right {
  float: right;
}
.num {
  margin-bottom: 15px;
}
.pager {
  margin-top: 15px;
  margin-bottom: 15px;
  float: right;
}
.el-link {
  padding-right: 10px;
}
.dialog-footer {
  position: absolute;
  right: 15px;
  bottom: 15px;
}
</style>
